<template>
    <view class="container">
        <view class="storeList">
            <view class="search bg-color acea-row row-between-wrapper">
                <view class="input acea-row row-between-wrapper" style="margin: 8px 0;">
                    <text class="iconfont icon-sousuo"></text>
                    <form @submit="searchSubmit">
                        <input placeholder="搜索" placeholder-class="placeholder" @confirm="searchSubmit" confirm-type="search" name="search" :focus="inputShowed" :value="where.keyword">
                    </form>
                </view>
            </view>
            <view style="margin-top: 44px;">
                <view class="list acea-row row-between-wrapper on" v-for="(item, index) in list" :key="index">
                    <view style="position: relative;"><text style="font-size: 32rpx;font-weight: bold;">{{item.title}}</text> <text style="position: absolute;right: 10px;">组合价：<text style="color: red;">{{ item.price }}</text></text></view>
                    <view class="item on" v-for="(im, idx) in item.goods" :key="idx" :data-id="im.id">
                        <view class="pictrue on">
                            <image :src="im.image" class="on"></image>
                        </view>
                        <view class="text on">
                            <view class="name line1">{{ im.name }}</view>
                            <view class="address" style="margin-top:60rpx;">
                                <block v-if="im.price">价格：<text style="color: red;">{{ im.price }}</text></block>
                            </view>
                        </view>
                        <view class="pictrue on">
                            <view class="custom-checkbox" @click.stop="xuan(index,idx)">
                                <view v-if="im.is_main" style="padding-right: 5px; width: 20px; color: red;display: contents;">必选</view>
                                <view v-if="!im.is_main" :class="['checkbox-circle', im.active ? 'checked' : '']">
                                    <text v-if="im.active" class="checkmark">✓</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="tui-order-btn">
                        <tui-button @click="confirmBtnTap(index)" type="danger" width="152rpx" height="56rpx" :size="26" shape="circle">预约</tui-button>
                    </view>

                </view>

            </view>
            <!--加载loadding-->
            <tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
            <tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
            <!--加载loadding-->
        </view>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            list: [],

            keyword: '',
            page: 1,
            limit: 10,

            loadend: false,
            loading: false,
            loadding: false,
            pullUpOn: true,
        };
    },

    components: {},
    props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
    onLoad: function (options) {

    },

	/**
	 * 生命周期函数--监听页面显示
	 */
    onShow: function () {
        this.get_list();
    },

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
    onPullDownRefresh: function () {
        this.page = 1;
        this.loadend = false;
        this.list = [];
        this.get_list();
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 200);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        //只是测试效果，逻辑以实际数据为准
        this.loadding = true
        this.pullUpOn = true
        this.get_list();
        setTimeout(() => {
            this.loadding = false
            this.pullUpOn = false
        }, 1000)
    },
    methods: {
        xuan: function (index, idx) {
            let that = this;
            if (that.list[index].goods[idx].is_main) {
                return
            }

            let arr = that.list[index].goods.filter(item => item.active);
            if (arr.length + 1 > that.list[index].num) {
                if(that.list[index].goods[idx].active){
                    that.list[index].goods[idx].active = false
                    return
                }
                uni.showToast({
                    title: '最多可选' + that.list[index].num + '项',
                    icon: 'none'
                });
                return
            }
            that.list[index].goods[idx].active = !that.list[index].goods[idx].active
        },

        async confirmBtnTap(index) {
            let that = this;

            var buyNowInfo = {};
            var shopList = [];
            that.list[index].goods = that.list[index].goods.filter(item => item.active);
            for (var i = 0; i < that.list[index].goods.length; i++) {
                var id = that.list[index].goods[i].id;
                let goods = {};
                let res = await that.$request.post('goods.buynowinfo', {
                    goodsId: id,
                    buyNumber: 1,
                })
                goods = res.data;
                shopList[i] = goods;
            }
            buyNowInfo.shopList = shopList;
            buyNowInfo.deliverymode = 1;
            buyNowInfo.is_times = 0;
            buyNowInfo.ptype = 2;
            buyNowInfo.type = 'composition';
            buyNowInfo.composition_id = that.list[index].id;

            uni.setStorage({
                key: "buyNowInfo",
                data: buyNowInfo
            });

            uni.navigateTo({
                url: "/pages/submitOrder/submitOrder?orderType=buyNow"
            });
        },

        toDetailsTap: function (e) {
            uni.navigateTo({
                url: "/pages/goodsDetail/goodsDetail?id=" + e.currentTarget.dataset.id
            });
        },
        searchSubmit: function (e) {
            var that = this;
            that.keyword = e.detail.value;
            that.page = 1;
            that.loadend = false;
            this.get_list(true);
        },

        get_list: function (isPage) {
            var that = this;
            if (that.loading) return;
            if (isPage === true) {
                that.page = 1;
                that.list = [];
            } else {
                if (that.loadend) return;
            }
            that.$request.post('composition.list', {
                keyword: that.keyword,
                page: that.page,
                limit: that.limit
            }).then(res => {
                if (res.errno == 0) {
                    that.list = that.list.concat(res.data);
                    that.page = that.page + 1
                    that.loadend = that.list.length < that.limit;
                    if (that.list.length == 0) {
                        that.pullUpOn = false;
                    }
                }
            });
        }
    }
};
</script>
<style>
page {
    font-size: 28rpx;
    background-color: #f5f5f5;
    color: #333;
}

.container {
    padding-bottom: 228rpx;
    color: #333;
}

.storeList .search {
    width: 100%;
    height: 86rpx;
    padding-left: 23rpx;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    left: 0;
}

.storeList .bg-color {
    background-color: #e41f19;
}

.storeList .search .location {
    color: #fff;
    flex: 1;
    display: flex;
    width: 62rpx;
    font-size: 40rpx;
    height: 86rpx;
    line-height: 86rpx;
    background-image: "../../images/location_fill.png";
}

.storeList .search .input {
    /* flex: 1; */
    display: flex;
    width: 610rpx;
    height: 60rpx;
    background-color: #fff;
    border-radius: 50rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.storeList .search .input input {
    width: 478rpx;
    height: 100%;
    font-size: 26rpx;
}

.storeList .search .input .placeholder {
    color: #999;
}

.storeList .search .input .iconfont {
    font-size: 35rpx;
    color: #555;
}

.storeList .search .icon-pailie,
.storeList .search .icon-tupianpailie {
    color: #fff;
    width: 62rpx;
    font-size: 40rpx;
    height: 86rpx;
    line-height: 86rpx;
}

.navscroll {
    height: 86rpx;
    position: fixed;
    display: flex;
    white-space: nowrap;
    left: 0;
    top: 84rpx;
}

.storeList .nav {
    width: 1000rpx;
    display: flex;
    color: #454545;
    font-size: 28rpx;
    background-color: #fff;
}

.storeList .nav .item {
    text-align: center;
    height: 100%;
    padding: 25rpx;
}

.storeList .nav .item.font-color {
    font-weight: bold;
}

.storeList .nav .item image {
    width: 15rpx;
    height: 19rpx;
    margin-left: 10rpx;
}

.storeList .list {
    padding: 0 20rpx;
    padding-top: 40rpx;
    margin-top: 30rpx;
}

.kmclass {
    color: #999;
}

.storeList .list.on {
    background-color: #fff;
    border-top: 1px solid #f6f6f6;
}

.storeList .list .item {
    width: 345rpx;
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
}

.storeList .list .item.on {
    width: 100%;
    display: flex;
    border-bottom: 1rpx solid #f6f6f6;
    padding: 30rpx 0;
    margin: 0;
}

.storeList .list .item .pictrue {
    width: 100%;
    height: 345rpx;
}

.storeList .list .item .pictrue.on {
    width: 180rpx;
    height: 180rpx;
}

.storeList .list .item .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx 10rpx 0 0;
}

.storeList .list .item .pictrue image.on {
    border-radius: 6rpx;
}

.storeList .list .item .text {
    padding: 20rpx 17rpx 26rpx 17rpx;
    font-size: 28rpx;
    color: #373333;
}

.storeList .list .item .text.on {
    width: 508rpx;
    padding: 0 0 0 22rpx;
}

.storeList .list .item .text .money {
    font-size: 23rpx;
    margin-top: 8rpx;
}

.storeList .list .item .text .money.on {
    margin-top: 50rpx;
}

.storeList .list .item .text .money .num {
    font-size: 32rpx;
}

.storeList .list .item .text .vip {
    font-size: 22rpx;
    color: #aaa;
    margin-top: 7rpx;
}

.storeList .list .item .text .vip.on {
    margin-top: 12rpx;
}

.storeList .list .item .text .vip .vip-money {
    font-size: 24rpx;
    color: #282828;
    font-weight: bold;
}

.storeList .list .item .text .vip .vip-money image {
    width: 46rpx;
    height: 21rpx;
    margin-left: 4rpx;
}

.noCommodity {
    background-color: #fff;
}

.store-star {
    margin-top: 10rpx;
}

.store-star image {
    width: 28rpx;
    height: 28rpx;
}
.tui-order-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    padding: 10rpx 30rpx 20rpx;
    box-sizing: border-box;
}
.custom-checkbox {
    display: flex;
    align-items: center;
    padding: 10px;
}

.checkbox-circle {
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    border-radius: 50%;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.checked {
    background-color: #007aff;
    border-color: #007aff;
}

.checkmark {
    color: white;
    font-size: 16px;
}

.label {
    font-size: 14px;
}
</style>
